/*  冻结解冻详情
 * @Author: Setsuna
 * @Email: 601890383@qq.com
 * @FilePath: \src\pages\QuotaManage\QuotaAdjust\component\FreezeDetails.tsx
 * @Date: 2021-08-30 09:31:11
 * @LastEditTime: 2021-09-06 12:02:22
 */

import React from 'react'
import { http, UdForm, validators } from '@/lib'
import { Select, Spin, message, Modal, Button, Input, Timeline, Row } from 'antd'
import quotaApis from '@/apis/AboutQuota'
import ProcessList from '@/components/ProcessList/index'
import { WithToolbar } from '@components/PhotoView'
const { Option } = Select
const { TextArea } = Input
interface IState {
  loading: boolean
  recordDetail: Record<string, any>
}

export default class FreezeDetails extends React.Component<any> {
  private labelCol: any = { span: 2 }
  private recordDetailForm: any
  private PLAN_TYPE_ENUM: any = {
    0: '计划内',
    1: '计划外',
  }
  private FROZEN_STATUS_ENUM: any = {
    0: '解冻',
    1: '冻结',
  }
  private FROZEN_TYPE_ENUM: any = {
    SUSPEND: '暂停发货',
    VIOLATION: '违规',
    OTHER: '其他',
  }
  state: IState = {
    loading: false,
    recordDetail: {},
  }
  render() {
    const { recordDetail } = this.state
    let items = [
      { id: 'brandName', label: '品牌公司', render: <Input readOnly /> },
      { id: 'prodBarname', label: '配额品项', render: <Input readOnly /> },
      { id: 'dealerName', label: '客户名称', render: <Input readOnly /> },
      { id: 'stageYear', label: '考核年度', render: <Input readOnly /> },
      { id: 'stageName', label: '考核阶段', render: <Input readOnly /> },
      { id: 'term', label: '配额有效期', render: <Input readOnly /> },
      { id: 'planTypeText', label: '计划类型', render: <Input readOnly /> },
      {
        id: 'frozenStatusText',
        label: '申请类型',
        render: <Input readOnly />,
      },
      {
        label: '原因',
        id: 'frozenTypeText',
        render: <Input readOnly />,
      },
      { label: '备注', id: 'remark', render: <TextArea rows={3} readOnly /> },
      {
        id: 'file',
        label: '附件',
        render: (
          <>
            <WithToolbar
              imagesList={this.state?.recordDetail?.['quotaApplyDetailFileRespVoList'] || []}
              type="processList"
            />
          </>
        ),
      },
    ]
    items =
      this.state.recordDetail['frozenStatus'] === 1
        ? items
        : items.filter(item => {
            return item.id !== 'frozenType'
          })
    return (
      <Spin spinning={this.state.loading}>
        <div className="ant-modal-title">审批详情</div>
        <UdForm
          key={Date.now()}
          values={this.state.recordDetail}
          labelCol={this.labelCol}
          getForm={form => (this.recordDetailForm = form)}
          items={items}
        />

        <ProcessList record={this.state.recordDetail} />
      </Spin>
    )
  }

  componentDidMount() {
    let { record } = this.props
    this.getDetailFrozenDetail(record.id)
  }

  //获取冻结-解冻详情
  private getDetailFrozenDetail = (id: number | string) => {
    this.setState({ loading: true })
    http
      .get(quotaApis.getDetailFrozenById, { params: { id } })
      .then(res => {
        let { data } = res
        data.term = data.stageBeginTime && data.stageBeginTime ? `${data.stageBeginTime}-${data.stageEndTime}` : ''
        data.planTypeText = this.PLAN_TYPE_ENUM[data.planType]
        data.frozenStatusText = this.FROZEN_STATUS_ENUM[data.frozenStatus]
        data.frozenTypeText = this.FROZEN_TYPE_ENUM[data.frozenType]
        this.setState({
          recordDetail: data,
        })
      })
      .finally(() => {
        this.setState({ loading: false })
      })
  }

  private onOk = e => {
    e.close()
  }
}
